<template>
  <view>
    <view class="lz-status_bar">
      <view class="lz-top_view"></view>
    </view>
    <view class="index-head">
      <view class="index-head-top">
        <view class="index-head-l"
              @tap="$navigateBack">
          <view class="iconfont icon-zuojiantou"></view>
        </view>
        <view class="index-head-m">消息通知</view>
      </view>
    </view>
    <view class="index-tiku">
      <block v-for="(item, index) in message_list"
             :key="index">
        <view class="index-tiku-content"
              v-if="item.type === 2"
              @tap="$openrul('/pages/my/notice/noticeDetail/index?id=' + item.id)">
          <view class="index-tiku-content-flex">
            <view class="index-tiku-content-top">
              <view class="round-dot" v-if="item.is_read == 0"></view>
              <view>{{ item.notice_title }}</view>
            </view>
          </view>
          <view class="index-tiku-content-flex">
            <view class="index-tiku-content-bottom">
              <view class="pub-gray">发布时间：{{item.create_time}}</view>
            </view>
          </view>
        </view>
      </block>
    </view>
	<no-recode :show="is_recode"></no-recode>
  </view>
</template>
<script>
	import noRecode from '@/components/no-recode.vue'
export default {
  data() {
    return {
      message_list: []
    };
  },
  onShow() {
    this.get_xiaoxi_list();
  },
  mounted() {},
  computed: {
	  is_recode(){
	  	return (this.message_list.length  == 0)
	  },
  },
  components: {noRecode},
  methods: {
    async get_xiaoxi_list() {
      let res = await this.$myHttp.post({
        url: this.$myHttp.urlMap.messageList
      });
      if (res.code === 1) {
        let rows = res.data.rows;
        for (let i = 0, leng = rows.length; i < leng; i++) {
          rows[i].create_time = this.$myUtils.$common.formatDate(
            rows[i].create_time * 1000,
            "Y年M月D日 h:m:s"
          );
        }
        this.message_list = res.data.rows;
      }
    }
  }
};
</script>
<style>
.round-dot {
    width: 8px;
  height: 8px;
  position: relative;
  margin: 4px 8px !important;
  color: #3c7bfc;
  background-color:#3c7bfc;
  border-radius: 4px;
}
.index-tiku {
  background: #fff;
}
.index-tiku-content {
  width: 92%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  padding: 13px 0;
  border-bottom: solid 1px #f5f5f5;
}
.index-tiku-content-flex {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.index-tiku-content .index-tiku-content-flex:first-child {
  padding-bottom: 6px;
}
.index-tiku-content .index-tiku-content-flex:last-child {
  font-size: 14px;
}
.index-tiku-content-top {
  display: flex;
  align-items: center;
}
.index-tiku-content-top img {
  width: 20px;
  height: 22px;
  margin-right: 10px;
}
.index-tiku-content-bottom {
  display: flex;
  align-items: center;
}
</style>
